<template>
    <div>
        <div class="u_content_box">
            <div class="u_content_top">
                <div>
                    <a-button type="primary" icon="plus" @click="add">新增</a-button>
                </div>
                <!-- <div>
                  <a-input-group compact>
                    <a-input-search placeholder="请输入" style="width: 300px" enter-button @search="onSearch" />
                  </a-input-group>
                </div> -->
            </div>
            <div class="u_content_input">
                <a-table :columns="columns" size="small" :pagination="false" :data-source="list"
                    @change="handleTableChange2" :scroll="{ y: screenHeight, x: 1300 }">

                    <span slot="image" slot-scope="image">
                        <img :src="'https://cdn.fanzhuankj.top/' + image" alt="" class="goodsImg">
                    </span>

                </a-table>
            </div>
        </div>
        <div style="display: flex;justify-content: end;"> <a-pagination @change="changePage" v-model:current="current"
                :total="total" show-less-items /></div>

        <loading v-if="load == 0" class="loading"></loading>
        <router-view />
    </div>
</template>

<script>
const columns = [

    {
        title: "日期",
        width: 100,
        dataIndex: "create_time",
        key: "create_time",
        align: "center",
    },
    {
        title: "流量类型",
        width: 80,
        dataIndex: "type",
        key: "type",
        align: "center",
    },
    {
        title: "付费单价(元)",
        width: 80,
        dataIndex: "price",
        key: "price",
        align: "center",
    },
    {
        title: '充值订单总数',
        width: 80,
        dataIndex: "totalNum",
        key: 'totalNum',
        align: "center",
    },
    {
        title: '退款订单数',
        width: 80,
        dataIndex: "refundNum",
        key: 'refundNum',
        align: "center",
    },
    {
        title: '付费收益(元)',
        width: 80,
        dataIndex: "payPrice",
        key: 'payPrice',
        align: "center",
    },
    {
        title: '广告收益(元)',
        width: 80,
        dataIndex: "adPrice",
        key: 'adPrice',
        align: "center",
    },
    {
        title: '总收益',
        width: 80,
        dataIndex: "priceAll",
        key: 'priceAll',
        align: "center",
    },

    {
        title: "",
        key: "edit",
        fixed: "right",
        width: 80,
        scopedSlots: { customRender: "edit" },
        align: "center",
    },
    {
        title: "",
        key: "cancle",
        fixed: "right",
        width: 80,
        scopedSlots: { customRender: "cancle" },
        align: "center",
    },



]
const ipagination = {
    current: 1,
    pageSize: 10,
    pageSizeOptions: ["10"],
    showTotal: (total, range) => {
        return range[0] + "-" + range[1] + " " + "共" + total + "条"
    },
    showQuickJumper: true,
    showSizeChanger: true,
    total: 0,
}


import loading from "../../components/loading.vue"
import { indexList, indexDel, getImgToken, getAuthorVideoList, deleteVideo } from "../../http/api"
export default {
    name: "userMsg",
    data () {
        return {
            //搜索
            searchKey: "",
            searchText: "",
            columns,
            list: [],
            ipagination: {},
            editflag: false,
            editList: {},
            page: 1,
            load: 1, //加载中
            current: 1,
            imgToken: '',
            userInfo: {},
            skip: 0,
            total: 0,
            screenHeight: ''
        }
    },
    created () {
        //获取屏幕高度
        this.screenHeight = window.innerHeight * 0.6
        console.log(this.screenHeight)
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.ipagination.current = 1
        this.getList()
        this.getImgToken()

    },
    methods: {
        //分页
        changePage (e) {
            console.log(e)
            this.skip = (e - 1) * 10
            this.getList()
        },
        //搜索
        onSearch (e) {
            this.searchText = e
            this.page = 1
            this.ipagination.current = 1
            this.indexList(this.page, this.$store.state.user.shopId)
        },
        //删除
        shanchu (_id) {
            console.log(_id)

            this.deleteVideo(_id)
        },
        //编辑
        edit (list) {
            // console.log(list);
            this.editflag = true
            list.imgToken = this.imgToken
            this.editList = list
        },
        //新增    
        async add () {

            this.editflag = true
            this.editList = {}

            this.editList.imgToken = this.imgToken

        },
        //子组件传值展示model框
        show (e) {
            // console.log(e);
            this.editflag = e
            this.list = []
            // this.indexList(this.page, this.$store.state.user.shopId)
            this.getList()
        },
        //分页
        handleTableChange2 (pagination, filters, sorter) {
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize
            this.page = pagination.current
            this.indexList(this.page, this.$store.state.user.shopId)
        },
        //视频列表
        async getList () {
            this.load = 0
            const parameter = {
                "$url": "getAuthorVideoList",
                "skip": this.skip,
            }
            const res = await getAuthorVideoList(parameter)
            console.log('视频数据列表', res)
            var d = res.res
            this.load = 1
            d.data.forEach(item => {
                let totalKsPriceAll = ((item.totalKsPriceAll ? item.totalKsPriceAll : 0) / 1000).toFixed(2)
                let totalDyPriceAll = ((item.totalDyPriceAll ? item.totalDyPriceAll : 0) / 1000).toFixed(2)
                let totalDyPriceNum = item.totalDyPriceNum ? item.totalDyPriceNum : 0
                let totalKsPriceNum = item.totalKsPriceNum ? item.totalKsPriceNum : 0
                item.price = item.price ? item.price / 100 : 0.88
                item.refundNum = 0
                item.type = '首页推荐'

                let adEndNum = item.adEndNum?item.adEndNum:0
                let adPrice = (adEndNum * 0.001 * 98).toFixed(2)
                item.adPrice = adPrice
                
                item.payPrice = (Number(totalKsPriceAll) + Number(totalDyPriceAll)).toFixed(2)
                item.priceAll = (Number(totalKsPriceAll) + Number(totalDyPriceAll) + Number(adPrice)).toFixed(2)
                item.totalNum = totalDyPriceNum + totalKsPriceNum

            })

            this.total = res.total_count.total

            this.list = d.data
        },
        async deleteVideo (_id) {
            const parameter = {
                "$url": "deleteVideo",
                "_id": _id


            }
            const res = await deleteVideo(parameter)
            console.log('删除首推', res)
            if (res.code == 200) {
                this.$tishi("success", res.msg)
                if ((this.ipagination.total - 1) % this.ipagination.pageSize == 0 && (this.page - 1) != 0) {
                    this.page = this.page - 1
                }
                this.list = []
                this.getList()
            } else {
                this.$tishi("warning", res.msg)
            }
        },
        async getImgToken () {
            const parameter = {
                "$url": "getQiniuToken",
            }
            const res = await getImgToken(parameter)
            console.log('上传视频token', res)
            this.imgToken = res.uploadToken
        },
    },
    components: {

        loading,
    },
}
</script>

<style scoped>
.u_content_box {
    width: 100%;
}

.u_content_top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #efefef;
}

.u_content_input {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #efefef;
}

.u_userImg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.editable-row-operations a {
    margin-right: 8px;
}

.goodsImg {
    width: 70rem;
    height: 70rem;
    border-radius: 4rem;
}
</style>